<template>
<div>
  <div>
    <el-button type="primary" size="mini" @click.native.prevent="allsure()">批量确认</el-button>
    <el-button type="danger" size="mini" @click.native.prevent="allno()">批量拒绝</el-button>
  </div>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="100">
    </el-table-column>
    
    <el-table-column
      prop="user.nickname"
      label="姓名"
      width="250">
    </el-table-column>
    
    <el-table-column
      prop="community.name"
      label="小区"
      width="300">
    </el-table-column>
    <el-table-column
      prop="houseNumber"
      label="门牌号"
      width="300"
      >
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
      <el-button type="primary" size="mini" @click.native.prevent="onesure(scope,scope.$index)">确认</el-button>
      <el-button type="danger" size="mini" @click.native.prevent="oneno(scope,scope.$index)">拒绝</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        multipleSelection: []
      }
    },

    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      allsure(){
        this.$confirm('此操作将同意全部审批, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '审批成功!',
          });
          this.$axios.put("http://localhost:8080/housing/allsure",this.multipleSelection).then(res => {
          })
          let arr1 = this.tableData
          let arr2 = this.multipleSelection
          let diff = arr1.filter(item => !new Set(arr2).has(item));
          this.tableData = diff
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });          
        });
      },
      allno(){
        this.$confirm('此操作将拒绝申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '拒绝成功!',
          });
          this.$axios.put("http://localhost:8080/housing/allno",this.multipleSelection).then(res => {
          })
          let arr1 = this.tableData
          let arr2 = this.multipleSelection
          let diff = arr1.filter(item => !new Set(arr2).has(item));
          this.tableData = diff
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });          
        });
      },
      oneno(scope,index){
        this.$confirm('此操作将拒绝审批, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '拒绝成功!',
          });
          this.tableData.splice(index, 1);
          this.$axios.put("http://localhost:8080/housing/noById",scope.row).then(res => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });          
        });
      },

      onesure(scope,index){
        this.$confirm('此操作将确认审批, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '审批成功!',
          });
          this.tableData.splice(index, 1);
          this.$axios.put("http://localhost:8080/housing/sureById",scope.row).then(res => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });          
        });
      }
    },

    mounted(){
      this.$axios.get("http://localhost:8080/housing/findNoReply").then(res => {
          this.tableData = res.data.data
        })
    }
  }
</script>